<template>
	<view class="wrap">
		<view class="list-main" v-show="order">
		    <view class="display-flex-column">
				<view class="row-center tytop">
					<view class="type-desc">
						{{order.type_desc?order.type_desc:""}}
					</view>
					<view class="add_time">
						下单时间：{{order.add_time}}
					</view>
					<view class="status_desc">
						{{order.status_desc?order.status_desc:""}}
					</view>
				</view>
				<view class="row" style="margin-bottom: 15px;">
					<view class="display-flex-column">
						<view class="row-center">
							<view class="station_dot station_dot_start">
							</view>
							<view class="od-item">
								{{order.origin}}
							</view>
						</view>
						
						<view class="shu-line" style="margin: 0 18px;">
							
						</view>
						
						<view class="row-center">
							<view class="station_dot station_dot_end">
							</view>
							<view class="od-item">
								{{order.destination}}
							</view>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="row-center" style="margin: 14px 5px;">
					<view v-if="order.type==1" class="dan">
						出发：{{order.go_time}}
					</view>
					<view v-if="order.type==2" class="dan display-flex-column">
						<text>出发：{{order.go_time}}</text>
						<text>返程：{{order.back_time}}</text>
					</view>
					<view v-if="order.type==3" class="dan">
						用车天数：{{order.days}}天
					</view>

				</view>
				
			</view>
		</view>
	    <view class="ex-main display-flex-column ">
			<view class="row-center ex-color">
				<text>用车人数</text>
				<text style="margin-left: auto;">{{order.people_sum}}人</text>
			</view>
	    	<view v-for="(item,index) in order.car_type_list" :key="index" class="row-center ex-color">
	    		<text>{{item.name}}</text>
	    		<text style="margin-left: auto;">{{item.num}}辆</text>
	    	</view>
	    </view> 
		<view  class="ex-main display-flex-column ">
			<view class="row-center ex-color">
				<text>总报价</text>
				<text style="margin-left: auto;">￥{{order.price?order.price:"--"}}元</text>
			</view>
			<view class="row-center ex-color">
				<text>需支付定金</text>
				<text style="margin-left: auto;">￥{{order.t_price?order.t_price:"--"}}元</text>
			</view>
			<view class="row-center ex-color">
				<text>需支付尾款</text>
				<text style="margin-left: auto;">￥{{order.w_price?order.w_price:"--"}}元</text>
			</view>
		</view> 
		<view style="position:fixed;bottom:0;left:0;right:0;padding:20rpx 24rpx;padding-bottom:20rpx;background-color: #fff;">
			<view @click="orderCancel" v-if="order.status == 0"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >取消订单</view>
			<view v-if="order.status == -1"  style="background:#dadbdc;color:#6d6d6d;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >订单已取消</view>
			<view @click="goPay" v-if="order.status == 1"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >立即支付定金（￥{{order.t_price?order.t_price:''}}）</view>
			<view @click="goPay" v-if="order.status == 2"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >立即支付尾款（￥{{order.w_price?order.w_price:''}}）</view>
			<view v-if="order.status == 3||order.status == 4"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >已完成</view>
		</view>
		
		
		<payment :payMode='payMode' :is-call="true" :pay_close="pay_close" @onChangeFun='onChangeFun' 
			:totalPrice='totalPrice'></payment>
	</view>	
</template>

<script>
	import {
			mapGetters
		} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	
	import { userBaocheDetail,baocheCancel } from "@/api/api.js"
    import { orderBaocheCreate, orderBaochePay, wxPayOrderBaocheResult } from "@/api/order.js"
    import payment from '@/components/payment';
      
	export default {
		computed: mapGetters(['isLogin']),
		components:{
			payment
		},
		data() {
			return {
				baoche_id: '',
				order: '',
				order_type: 0,
				pay_close: false,
				totalPrice: 0,
				payType: 'weixin', //支付方式
				//支付方式
				payMode: [
					// #ifdef MP-WEIXIN
					{
					name: '微信支付',
					icon: 'icon-a-ic_wechatpay',
					value: 'routine',
					title: '微信快捷支付',
					payStatus: true
					},
					// #endif
					// #ifdef MP-ALIPAY
					{
					name: '支付宝支付',
					icon: 'icon-a-ic_alipay',
					value: 'alipayRoutine',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					// #ifdef MP-BAIDU
					{
					name: '百度支付',
					icon: 'icon-baidu-zhifu',
					value: 'baiduRoutine',
					title: '百度支付',
					payStatus: true
					}
					// #endif
					
				],
				
			};
		},
		onShow() {
			if(this.isLogin == true){
				uni.showLoading({
					title:'请稍后...'
				})
				 this.userBaocheDetail()
			}
			
	
		},
		onLoad(option) {
			if(this.isLogin){
			} else {
				toLogin()
			}
			this.baoche_id= option.baoche_id
			
		},
		onReady() {
		},
		methods:{
			goPay() {
			
				this.pay_close = true;
			},

             /**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			
			payCheck(type) {
				
				this.payType = type;
			
				this.SubOrder();
			},
			SubOrder: function(e) {
				let that = this,
					data = {};
			  
				if (!that.payType) return that.$util.Tips({
					title: '请选择支付方式'
				});
				
				// if (that.order_type !=1 || that.order_type!=0 ) return that.$util.Tips({
				// 	title: '参数错误'
				// });
			    
				data = {
					baoche_id: that.baoche_id,
					order_type: that.order_type,
					pay_type: that.payType,
				}
				// if (data.payType == 'yue' && parseFloat(that.userInfo.now_money) < parseFloat(that.totalPrice))
				// 	return that.$util.Tips({
				// 		title: '余额不足！'
				// 	});
			
				uni.showLoading({
					title: '订单支付中'
				});
				that.payment(data);
			},
			
			payment: function(data) {
			
				let that = this;
			    orderBaocheCreate(data).then(res => {
					var order = res.data.order
					uni.showLoading({
						title:'请稍后...'
					})
					
				
					
					
					orderBaochePay({
						order_id: order.order_id,
						pay_type: that.payType
					}).then(res => {
						
						let status = res.data.status,
							orderId = res.data.result.order_id,
							callback_key = res.data.result.pay_key,
							jsConfig = res.data.result.config,
							goPages =  '/pages/bus/baoche/order_list'
						switch (status) {
							case 'ORDER_EXIST':
							case 'EXTEND_ORDER':
							case 'PAY_ERROR':
							case 'error':
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: res.message
								});
								break;
							case 'success':
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: res.message,
									icon: 'success'
								});
								break;
							case 'alipay':
							case "alipayQr":
								uni.hideLoading();
								that.payClose();
								uni.navigateTo({
									url: '/pages/order_pay_back/index?keyCode='+callback_key+'&url='+jsConfig+'&type=11',
								})	
								return;
								break;
								// #ifndef MP
							case "wechat":
							case "weixin":
							case "weixinApp":
								jsConfig.timeStamp = jsConfig.timestamp;
								// #ifndef APP-PLUS
								this.$wechat.pay(jsConfig).then(res => {
									uni.hideLoading();
									that.payClose();
									return that.$util.Tips({
										title: res.message,
										icon: 'success'
									});
								}).catch(res => {
									uni.hideLoading();
									if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
										title: '取消支付'
									});
								})
								// #endif
								// #ifdef APP-PLUS
								let mp_pay_name=''
								if(uni.requestOrderPayment){
									mp_pay_name='requestOrderPayment'
								}else{
									mp_pay_name='requestPayment'
								}
								uni[mp_pay_name]({
									provider: 'wxpay',
									orderInfo: jsConfig,
									success: (e) => {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										});
									},
									fail: (e) => {
										uni.hideLoading();
										that.payClose();
										uni.showModal({
											content: "支付失败",
											showCancel: false,
											success: function(res) {}
										})
									},
									complete: () => {
										uni.hideLoading();
									},
								});
								// #endif
								break;
								// #endif
								// #ifdef MP
							case "routine":
								jsConfig.timeStamp = jsConfig.timestamp;
								let mp_pay_name=''
								if(uni.requestOrderPayment){
									mp_pay_name='requestOrderPayment'
								}else{
									mp_pay_name='requestPayment'
								}
								uni[mp_pay_name]({
									...jsConfig,
									success: function(res) {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {
											tab: 5,
											url: goPages
										});
									},
									fail: function(e) {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '取消支付'
										});
									},
								})
								break;
							case "alipayRoutine":
							    console.log('jsConfig',jsConfig)
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: jsConfig.trade_no,
									success: function(res) {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {
											tab: 5,
											url: goPages
										});
									},
									fail: function(e) {
										console.log("err",e)
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '取消支付'
										});
									},
								})
								
								break;	
								// #endif
							case "balance":
								uni.hideLoading();
								that.payClose();
								//余额不足
								return that.$util.Tips({
									title: res.message
								}, {
									tab: 5,
									url: goPages
								});
								break;
								// #ifdef H5
							case 'h5':
								let host = window.location.protocol + "//" + window.location.host;
								let url = `${host}/pages/annex/vip_center/index`
								let eUrl = encodeURIComponent(url)
								let jsurl = jsConfig.mweb_url || jsConfig.h5_url
								let locations = `${jsurl}&redirect_url=${eUrl}`
								setTimeout(() => {
									location.href = locations;
								}, 100);
								break;
								// #endif
								// #ifdef APP-PLUS
							case 'alipayApp':
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: jsConfig,
									success: (e) => {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										});
									},
									fail: (e) => {
										uni.hideLoading();
										uni.showModal({
											content: "支付失败",
											showCancel: false,
											success: function(res) {}
										})
									},
									complete: () => {
										uni.hideLoading();
									},
								});
								break;
								// #endif
						}
				
					}).catch(err => {
						uni.hideLoading();
						that.userBaocheDetail()
						return that.$util.Tips({
							title: err
						}, () => {
							that.pay_fail()
						});
					})
				})	
			},
			
			pay_complete: function() {
				this.$set(this, 'pay_close', false);
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
			},
			pay_success: function() {
				this.pay_close = false;
			},
			userBaocheDetail(){
				uni.showLoading({
					title:'请稍后...'
				})
				userBaocheDetail({baoche_id: this.baoche_id}).then(res => {
					uni.hideLoading()
					this.order = res.data
					this.order_type = res.data.status == 2 ? 1 : 0
					this.totalPrice =  res.data.status == 2 ? res.data.wprice : res.data.tprice
				}).catch(err => {
					uni.hideLoading()
					return this.$util.Tips({
						title: err
					}); 
				})
			},
			orderCancel(){
				uni.showLoading({
					title:'请稍后...'
				})
				baocheCancel({baoche_id: this.baoche_id}).then(res => {
					uni.hideLoading()
					this.$util.Tips({
						title: "取消订单成功！"
					});
					this.userBaocheDetail()
					uni.navigateBack()
				}).catch(err => {
					this.$util.Tips({
						title: err.msg
					});
				})
			},
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
   .list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.type-desc{
		background-color: #007aff;
		color: #fff;
		padding: 1px 3px;
		border-radius: 3px;
	}
	.add_time{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.tytop{
		margin: 8px 5px;
	}
	.status_desc{
		margin-left: auto;
		color: #ff4231;
		font-weight: 700;
	}
	.dan{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}

  .ex-main{
		position: relative;
		margin: 60rpx 24rpx 0 24rpx;
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
	}
	.ex-color{
		color: #a7a7a7;
		font-size: 13px;
		margin-bottom: 13px;
	}
	.station_dot {
	    width: 17rpx;
	    height: 17rpx;
	    border-radius: 50%;
	    margin: 0 30rpx;
	}
	
	.station_dot_start {
	    background-color: rgb(142, 238, 25);
	}
	
	.station_dot_end {
	    background-color: rgb(243, 22, 22);
	}
	.line {
	    height: 2rpx;
	    background: #f0f0f0;
	}
</style>